<template>
  <div class="app">
    <div class="sidebar">
      <div class="logo">
        {{ classInfo.className }}
        <div class="class-info">
          <div>老师: {{ teacherName }}</div>
          <div>人数
            : {{ studentNumber }}</div>
        </div>
      </div>
      <ul class="menu">
        <li>学习计划：</li>
        <ul>
          <li v-for="(plan, index) in plans" :key="plan.id">
            {{ index + 1 }}. {{ plan.planName}}
          </li>
        </ul>
        <li>班级介绍：</li>
        <li>{{classInfo.announcement}}</li>
      </ul>
    </div>
    <div class="main-content">
      <div class="header">
        <div class="stat-box">
          <div class="stat-title">学习计划</div>
          <div class="stat-value">{{ plans.length }}</div>
        </div>
        <div class="stat-box">
          <div class="stat-title">已学时数</div>
          <div class="stat-value">0</div>
        </div>
      </div>

      <div class="table">
        <el-table :data="plans" stripe >
          <el-table-column prop="id" label="序号" width="80" align="center" sortable></el-table-column>
          <el-table-column prop="planName" label="计划名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="planTime" label="计划时间"></el-table-column>
          <el-table-column prop="planContent" label="计划内容"></el-table-column>
        </el-table>
      </div>
      <!-- Mini dialog for plan content -->
      <el-dialog :visible.sync="dialogVisible" title="Plan Content">
        <div>{{ currentPlanContent }}</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
      <div>
        <div style="margin-top: 50px; font-size: 15px">欢迎发表您宝贵的意见</div>
        <div style="margin-top: 20px">
          <el-input type="textarea" :rows="5" v-model="content"></el-input>
        </div>
        <div style="margin-top: 10px; text-align: right">
          <el-button type="primary" @click="submit(content, 0)">提交</el-button>
        </div>
        <div style="margin-top: 30px; margin-bottom: 500px;font-size: 15px">
          <el-row v-for="item in commentData" :key="item.id" style="margin-bottom: 30px">
            <el-col :span="4">
              <div style="display: flex; align-items: center;">
                <img :src="item.userAvatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
                <div style="flex: 1; margin-left: 10px">{{item.userName}}</div>
              </div>
            </el-col>
            <el-col :span="20">
              <div style="height: 50px; line-height: 50px">
                <el-row>
                  <el-col :span="18" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{item.content}}</el-col>
                  <el-col :span="6" style="text-align: right">{{item.time}}</el-col>
                </el-row>
              </div>
              <div v-for="child in item.children" :key="child.id" style="margin-bottom: 5px">
                <el-row>
                  <el-col :span="5">
                    <div style="display: flex; align-items: center;">
                      <img :src="child.userAvatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
                      <div style="flex: 1; margin-left: 10px">{{ child.userName }} 回复：</div>
                    </div>
                  </el-col>
                  <el-col :span="13" style="height: 50px; line-height: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{child.content}}</el-col>
                  <el-col :span="6" style="height: 50px; line-height: 50px; text-align: right">{{child.time}}</el-col>
                </el-row>
              </div>
              <div style="margin-top: 20px">
                <el-input style="width: 400px" v-model="item.tmp"></el-input>
                <el-button type="primary" style="margin-left: 5px" @click="submit(item.tmp, item.id)">回复</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="sidebar-right">
      <div class="announcement">
        <h2>公告</h2>
        <div class="front-notice"><i style="margin-right: 2px"></i>{{ top }}</div>
      </div>
      <div class="progress">
        <h2>我的进度</h2>
        <div class="progress-content">
          <div class="progress-circle">{{ progress.completed }} / {{ plans.length }} 计划</div>
        </div>
      </div>
      <div class="study-time">
        <h2>学习时长</h2>
        <div class="study-time-content">
          {{ studyTime }} 小时
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'App',
  data() {
    return {
      classInfo:{},
      announcement: '',
      progress: {
        completed: 0,
        total: 0
      },
      teacherName:[],
      studentNumber:0,
      top: '',
      notice: [],
      studyTime: 0,
      plans: [],
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      content: null,
      commentData: [],
      dialogVisible: false,
      currentPlanContent: '',
      classId:0
    };
  },
  mounted() {
    this.classId = this.$route.params.classId;
    this.fetchClassInfo();
    this.fetchAnnouncement();
    this.fetchProgress();
    this.fetchStudyTime();
    this.fetchPlans();
    this.loadNotice();
    this.loadComment();
    this.getStudentNumber()
  },
  methods: {
    getTeacherName(id){
      this.$request.get('/teacher/selectById/'+ id ).then(res=>{
        console.log(this.classInfo.teacherId)
        this.teacherName=res.data.name;
      })
    },
    getStudentNumber(){
      this.$request.get('/student/countNumber/'+ this.classId ).then(res=>{

        this.studentNumber=res.data;
      })
    },
    handleSelectionChange(rows) {
      this.ids = rows.map(v => v.id)
    },
    loadNotice() {
      this.$request.get('/notice/selectAll').then(res => {
        this.notice = res.data;
        let i = 0;
        if (this.notice && this.notice.length) {
          this.top = this.notice[0].content;
          setInterval(() => {
            this.top = this.notice[i].content;
            i++;
            if (i === this.notice.length) {
              i = 0;
            }
          }, 2500);
        }
      });
    },
    loadComment() {
      this.$request.get('/comment/selectAll', {
        params: {
          courseId: this.courseId
        }
      }).then(res => {
        if (res.code === '200') {
          this.commentData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    submit(content, parentId) {
      let data = {
        userId: this.user.id,
        courseId: this.courseId,
        content: content,
        parentId: parentId,
      };
      this.$request.post('/comment/add', data).then(res => {
        if (res.code === '200') {
          this.$message.success('评论成功');
          this.content = null;
          this.loadComment();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    fetchClassInfo() {

      this.$request.get('/classes/selectById/'+ this.classId).then(res=>{
        this.classInfo=res.data
        this.getTeacherName(this.classInfo.teacherId)
      })
    },
    fetchAnnouncement() {
      fetch('/api/announcement')
          .then(response => response.json())
          .then(data => {
            this.announcement = data;
          });
    },
    fetchProgress() {
      fetch('/api/progress')
          .then(response => response.json())
          .then(data => {
            this.progress = data;
          });
    },
    fetchStudyTime() {
      fetch('/api/studyTime')
          .then(response => response.json())
          .then(data => {
            this.studyTime = data;
          });
    },
    fetchPlans() {
      this.$request.get('/plan/selectByClassId/'+this.classId).then(res=>
      {
        this.plans=res.data
      })
    },
    showPlanContent(plan) {
      this.currentPlanContent = plan.plan_content;
      this.dialogVisible = true;
    }
  }
};
</script>


<style>
@import 'element-ui/lib/theme-chalk/index.css';
:root {
  --el-color-primary: #28a745; /* Light green primary color */
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 20px;
}

.app {
  display: flex;
  /*height: 100%;*/
  background-color: #f8f9fa;
}

.sidebar ,.sidebar-right{
  width: 250px;
  background-color: #f4f4f4;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}


.main-content {
  flex: 3;
  padding: 20px;
  background-color: #fff;
}

.menu {
  list-style-type: none;
  padding: 0;
}

.menu li {
  padding: 10px 0;
  cursor: pointer;
}

.menu li:hover {
  background-color: #ddd;
}

.logo {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #3b3b3b;
}

.class-info {
  font-size: 20px;
  margin-top: 10px;
}

.header {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.stat-box {
  flex: 1;
  margin: 0 10px;
  padding: 20px;
  background-color: #e9f7ef;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
}

.stat-title {
  font-size: 25px;
  color: #2e8b57;
}

.stat-value {
  font-size: 30px;
  font-weight: bold;
  margin-top: 10px;
  color: #2e8b57;
}

.plan {
  margin-bottom: 20px;
}

.plan-content {
  background-color: #e9f7ef;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.plan-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.plan-info {
  font-size: 16px;
}

.plan-status {
  font-size: 16px;
  color: #28a745;
}

.announcement, .progress, .study-time {
  margin-bottom: 20px;
}

.announcement-content, .progress-content, .study-time-content, .front-notice, .menu {
  background-color: #e9f7ef;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.progress-circle {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 10px solid var(--el-color-primary);
  line-height: 130px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  background-color: rgba(40, 167, 69, 0.1);
}
</style>
